<template>
<div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">
            <i class="el-icon-s-promotion"></i>
            后台管理</el-breadcrumb-item>
        <el-breadcrumb-item>
            管理员管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>
    <div>
        <el-button type="primary" size="medium"
                   @click="$router.push('/sys-admin/permission/admin/add-new')">
            添加管理员</el-button>
    </div>
    <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="id" label="ID" width="60" align="center"></el-table-column>
        <el-table-column label="LOGO" width="70" align="center">
            <template slot-scope="scope">
                <el-avatar :size="30" :src="scope.row.avatar" fit="contain"></el-avatar>
            </template>
        </el-table-column>

        <el-table-column prop="name" label="姓名" width="100" header-align="center"
                         show-overflow-tooltip></el-table-column>
        <el-table-column prop="username" label="用户名" width="100" header-align="center"
                         show-overflow-tooltip></el-table-column>
<!--        <el-table-column prop="nickname" label="昵称" width="100" header-align="center"-->
<!--                         show-overflow-tooltip></el-table-column>-->
        <el-table-column prop="phone" label="电话" width="150"  header-align="center"
                         show-overflow-tooltip></el-table-column>
        <el-table-column prop="email" label="邮箱" width="150"  header-align="center"
                         show-overflow-tooltip></el-table-column>
        <el-table-column prop="salary" label="工资" width="80"  header-align="center"
                         show-overflow-tooltip></el-table-column>
        <el-table-column prop="bankCard" label="银行卡" width="100"  header-align="center"
                         show-overflow-tooltip></el-table-column>
        <el-table-column prop="post" label="职位" width="80"  header-align="center"
                         show-overflow-tooltip></el-table-column>
        <el-table-column prop="description" label="简介" header-align="center"
                         show-overflow-tooltip></el-table-column>
        <el-table-column label="是否启用" width="80" align="center">
            <template slot-scope="scope">
                <el-switch
                        @change="toggleEnable(scope.row)"
                        v-model="scope.row.enable"
                        :active-value="1"
                        :inactive-value="0"
                        active-color="#13ce66"
                        inactive-color="#cccccc">
                </el-switch>
            </template>
        </el-table-column>
        <el-table-column label="查看权限" width="100" align="center">
            <el-button size="mini"   slot-scope="scope"
                       @click="openPermissionById(scope.row)"
            >查看</el-button>
        </el-table-column>

        <el-table-column label="操作" width="100" align="center">
            <template slot-scope="scope">
                <el-button type="primary"size="mini" icon="el-icon-edit" circle
                           @click="openEditDiaLog(scope.row)"></el-button>
                <el-button type="danger" size="mini" icon="el-icon-delete" circle
                           @click="openDeleteConfirm(scope.row)"></el-button>
            </template>
        </el-table-column>
    </el-table>
    <div style="text-align: right;margin: 10px auto">
        <el-pagination
                background
                @current-change="changePage"
                layout="total, prev, pager, next"
                :total="total"
                :current-page="currentPage"
                :page-size="pageSize">
        </el-pagination>
    </div>
    <el-dialog title="修改管理员详情" :visible.sync="dialogFormVisible">
        <el-form :model="editForm" :rules="rules" ref="ruleForm" label-width="100px">
            <el-form-item label="用户名" prop="username">
                <el-input v-model="editForm.username"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
<!--                <el-input v-model="editForm .password" readonly="true">-->
<!--                </el-input>-->
              <el-button @click="updatePassword()">修改密码</el-button>
            </el-form-item>
            <el-form-item label="昵称" prop="nickname">
                <el-input v-model="editForm.nickname"></el-input>
            </el-form-item>
            <el-form-item label="头像" prop="avatar">
                <el-input v-model="editForm.avatar"></el-input>
            </el-form-item>
            <el-form-item label="手机号码" prop="phone">
                <el-input v-model="editForm.phone"></el-input>
            </el-form-item>
            <el-form-item label="电子邮箱" prop="email">
                <el-input v-model="editForm.email"></el-input>
            </el-form-item>
            <el-form-item label="工资" prop="salary">
                <el-input v-model="editForm.salary"></el-input>
            </el-form-item>
            <el-form-item label="银行卡" prop="bankCard">
                <el-input v-model="editForm.bankCard"></el-input>
            </el-form-item>
            <el-form-item label="职位" prop="post">
                <el-input v-model="editForm.post"></el-input>
            </el-form-item>
            <el-form-item label="简介" prop="description">
                <el-input v-model="editForm.description"></el-input>
            </el-form-item>
            <el-form-item label="是否启用" prop="enable">
                <el-switch
                        v-model="editForm.enable"
                        :active-value="1"
                        :inactive-value="0"
                        active-color="#13ce66"
                        inactive-color="#ccc">
                </el-switch>
            </el-form-item>
          <el-form-item label="角色" prop="roleIds">
            <el-select v-model="editForm.roleIds" multiple >
              <el-option
                  v-for="item in roleListOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitEditForm">确 定</el-button>
        </div>
    </el-dialog>

        <el-dialog title="权限详情" :visible.sync="dialogFormVisible2">
            <el-table
                    :data="tableData2"
                    border
                    style="width: 100%">
                <el-table-column
                        prop="name"
                        label="权限名"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="value"
                        label="值"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="description"
                        label="简介">
                </el-table-column>
            </el-table>
        </el-dialog>


</div>
</template>

<script>
    export default {
     data(){
         return{
           formLabelWidth:'120px',
           roleListOptions: [{
                 value: '1',
                 label: '系统管理员'
             }, {
                 value: '2',
                 label: '超级管理员'
             }, {
                 value: '3',
                 label: '宠物管理员'
             }, {
                 value: '4',
                 label: '商品管理员'
             }, {
                 value: '5',
                 label: '客户管理员'
             }, {
                 value: '6',
                 label: '订单管理员'
             }],
             tableData: [],
             //权限表格
             tableData2:[],
             total:0,
             pageSize:0,
             currentPage:1,

             total2:0,
             pageSize2:0,
             currentPage2:1,
             dialogFormVisible:false,
             dialogFormVisible2:false,
             Roles:'',
             enable:'',
             editForm:{
                 username: '',
                 password: '',
                 nickname: '',
                 avatar: '',
                 phone: '',
                 email: '',
                 description: '',
                 enable: 0,
                 roleIds: []
             },
             rules: {
                 username: [
                     {required: true, message: '请输入名称', trigger: 'blur'},
                     {min: 2, max: 25, message: '长度在 2 到 25 个字符', trigger: 'blur'}
                 ],
                 description: [
                     {required: true, message: '请输入简介', trigger: 'blur'}
                 ],
                 sort: [
                     {required: true, message: '请输入排序序号', trigger: 'blur'},
                     {pattern: /^(\d{1}|[1-9]{1}[0-9]?)$/, message: '排序序号必须是 0~99 之间的数字', trigger: 'blur'}
                 ]
             }
         }

     },

        methods:{
            openPermissionById(admin){
                let url ='http://localhost:9281/permission/standard?id=' + admin.id;
                console.log('url = ' + url);
                let localJwt = localStorage.getItem('localJwt');

                this.axios
                    .create({
                        'headers': {
                            'Authorization': localJwt
                        }
                    })
                    .get(url).then((response) =>{
                    let jsonResult =response.data;
                    if(jsonResult.state==20000){
                        this.tableData2 = jsonResult.data.list;
                        this.dialogFormVisible2 = true;
                        this.total=jsonResult.data.total;
                        this.pageSize=jsonResult.data.pageSize;
                        this.currentPage=jsonResult.data.currentPage;
                    }else {
                        this.$alert(jsonResult.message, '错误', {
                            confirmButtonText: '确定',
                            callback: action => {
                                this.loadAdminList();
                            }
                        });
                    }}
                )

            },
           toggleEnable(admin){
             let enableText = ['禁用', '启用'];
             let url = 'http://localhost:9281/admin/' + admin.id;
             let enable = admin.enable;
             if (enable == 1) {
               url += '/enable';
             } else {
               url += '/disable';
             }
             console.log('url = ' + url);

             let localJwt = localStorage.getItem('localJwt');

             this.axios
                 .create({
                   'headers': {
                     'Authorization': localJwt
                   }
                 })
                 .post(url).then((response) => {
               let jsonResult = response.data;
               if (jsonResult.state == 20000) {
                 this.$message({
                   message: '将【' + admin.username + '】的启用状态修改为【' + enableText[enable] + '】成功！',
                   type: 'success'
                 });
                 this.loadAdminList();
               } else if (jsonResult.state == 40400) {
                 this.$alert(jsonResult.message, '操作失败', {
                   confirmButtonText: '确定',
                   callback: action => {
                     this.loadAdminList();
                   }
                 });
               } else {
                 this.$alert(jsonResult.message, '操作失败', {
                   confirmButtonText: '确定',
                   callback: action => {
                   }
                 });
               }
             }).catch(err => {
               let message = '服务器响应错误！';
               this.$alert(message, '操作失败', {
                 confirmButtonText: '确定',
                 callback: action => {
                 }
               });
             });
           },

            changePage(value){
                this.$router.replace('?page='+value)
                this.loadAdminList();
            },
          updatePassword(){
            this.$confirm(' 功能还未完善', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {

            }).catch(() => {

            });
          },

            openEditDiaLog(admin){
                let url ='http://localhost:9281/admin/standard?id=' + admin.id;
                console.log('url = ' + url);
                let localJwt = localStorage.getItem('localJwt');

                this.axios
                    .create({
                        'headers': {
                            'Authorization': localJwt
                        }
                    })
                    .get(url).then((response) =>{
                    let jsonResult =response.data;
                    if(jsonResult.state==20000){
                        this.editForm = jsonResult.data;
                        this.dialogFormVisible = true;

                        // this.Roles =
                    }else {
                        this.$alert(jsonResult.message, '错误', {
                            confirmButtonText: '确定',
                            callback: action => {
                                this.loadAdminList();

                            }
                        });
                    }}
                )
            },


            openDeleteConfirm(admin) {
                this.$confirm('此操作将永久删除【' + admin.id + '-' + admin.name + '】管理员，是否继续？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.handleDelete(admin);
                }).catch(() => {

                });
            },

            handleDelete(admin){
                let url ='http://localhost:9281/admin/delete';
                console.log('url='+url)

                let formData='id='+admin.id;
                console.log('formData='+formData);
                let localJwt = localStorage.getItem('localJwt');

                this.axios
                    .create({
                        'headers': {
                            'Authorization': localJwt
                        }
                    })
                    .post(url,formData).then((response) =>{
                    let jsonResult =response.data;
                    if (jsonResult.state == 20000) {
                        this.$message({
                            message: '删除管理员成功！',
                            type: 'success'
                        });
                        this.loadAdminList();
                    } else if (jsonResult.state == 40400) {
                        this.$alert(jsonResult.message, '错误', {
                            confirmButtonText: '确定',
                            callback: action => {
                                this.loadAdminList();
                            }
                        });
                    } else if (jsonResult.state == 40900) {
                        this.$alert(jsonResult.message, '错误', {
                            confirmButtonText: '确定',
                            callback: action => {
                            }
                        });
                    }
                    else {
                        this.$alert(jsonResult.message, '错误', {
                            confirmButtonText: '确定',
                            callback: action => {
                            }
                        });
                    }
                })
            },
            submitEditForm(){
                let url = 'http://localhost:9281/admin/update';
                console.log('url = ' + url);

                let formData = this.qs.stringify(this.editForm);
                console.log('formData = ' + formData);

                let localJwt = localStorage.getItem('localJwt');

                this.axios
                    .create({
                        'headers': {
                            'Authorization': localJwt
                        }
                    })
                    .post(url, formData).then((response) => {
                    let jsonResult = response.data;
                    if (jsonResult.state == 20000) {
                        this.$message({
                            message: '修改管理员成功！',
                            type: 'success'
                        });
                        this.dialogFormVisible = false;
                        this.loadAdminList();
                    } else if (jsonResult.state == 40400){
                        this.$alert(jsonResult.message, '错误', {
                            confirmButtonText: '确定',
                            callback: action => {
                                this.dialogFormVisible = false;
                                this.loadAdminList();
                            }
                        });
                    } else {
                        this.$alert(jsonResult.message, '错误', {
                            confirmButtonText: '确定',
                            callback: action => {
                            }
                        });
                    }
                });
            },

            loadAdminList(){
                let page = this.$router.currentRoute.query.page;
                console.log(page)
                if (!page) {
                    page = 1;
                }
                let url = 'http://localhost:9281/admin/list?page=' + page;
                console.log('url = ' + url);
                let localJwt = localStorage.getItem('localJwt');
                this.axios
                    .create({
                        'headers': {
                            'Authorization': localJwt
                        }
                    })
                    .get(url).then((response) =>{
                    let jsonResult =response.data;
                    if(jsonResult.state==20000){
                        this.tableData=jsonResult.data.list;
                        console.log(this.tableData)
                        this.total=jsonResult.data.total;
                        this.pageSize=jsonResult.data.pageSize;
                        this.currentPage=jsonResult.data.currentPage;
                    }else {
                        this.$alert(jsonResult.message, '错误', {
                            confirmButtonText: '确定',
                            callback: action => {
                            }
                        });
                    }
                })
            },
          loadRoleList() {
            let url = 'http://localhost:9281/role/list';
            console.log('url = ' + url);

            let localJwt = localStorage.getItem('localJwt');

            this.axios
                .create({
                  'headers': {
                    'Authorization': localJwt
                  }
                })
                .get(url).then((response) => {
              let jsonResult = response.data;
              console.log(jsonResult)
              this.roleListOptions = jsonResult.data;
            });
          }

        },



        mounted(){
            this.loadAdminList();
            this.loadRoleList()
        }

    }



</script>

<style scoped>

</style>